<template>
	<!-- 火灾监测 -->
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="outerCollapse">
			<u-collapse-item name="0" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">火灾传感设备统计</text></view>
				</template>
				<my-grid :list="list"></my-grid>
				<view class="fw m-t-10 tc"> 传感器状态监测 </view>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData2" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="1" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">火灾预警来源占比分析</text></view>
				</template>
				<view class="charts-box">
					<qiun-data-charts type="ring" :opts="opts2" :chartData="chartData3" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="2" class="bg-white">
				<template #title>
					<view class="content-item-title"><text class="title-txt">火灾预警次数统计</text></view>
				</template>
				<my-grid :list="list1" :col="2"></my-grid>
				<view class="fw m-t-10 tc"> 近30天预警趋势分析 </view>
				<view class="charts-box">
					<qiun-data-charts type="area" :opts="opts1" :chartData="chartData1" />
				</view>
			</u-collapse-item>
			<u-collapse-item name="3" class="m-t-10">
				<template #title>
					<view class="content-item-title"><text class="title-txt">火灾传感器列表</text></view>
				</template>
				<view class="flex m-between s-center">
					<uni-data-select class="fw m-r-10" v-model="selectValue" :localdata="range" :clear="false" style=" flex: 0 0 90px; "></uni-data-select>
					<u-search :show-action="true" actionText="搜索" :animation="true"></u-search>
				</view>
				<view class="flex m-between fw m-r-20 p-15">
					<view>设备编号</view>
					<view style="margin-right: 15px;">设备名称</view>
					<view>状态</view>
				</view>
				<u-collapse :border="false" :value="innerCollapseValue" ref="innerCollapse" @change="handleInnerCollapseChange">
					<u-collapse-item v-for="(item, index) in tableData" :key="index" :name="index">
						<template #title>
							<view class="flex m-between">
								<text class="title-txt">{{item.value}}</text>
								<text class="title-txt">{{item.value1}}</text>
								<text class="title-txt fw" style="color:#00B578 ;">{{item.value2}}</text>
							</view>
						</template>
						<view class="list-title">粉尘 <view class="list-conten">0.6mg/m³</view>
						</view>
						<view class="charts-box m-t-10">
							<qiun-data-charts type="area" :opts="opts3" :chartData="chartData3" />
						</view>
					</u-collapse-item>
				</u-collapse>
			</u-collapse-item>
		</u-collapse>
	</view>
</template>

<script setup>
	const showMoreKeys = ref([0, 1, 2, 3]),
		innerCollapseValue = ref([])
	let tableData = ref([{
			value: '001',
			value1: '设备A',
			value2: '在线',
		}, {
			value: '002',
			value1: '设备B',
			value2: '在线',
		}, ]),
		selectValue = ref(0),
		range = ref([{
			value: 0,
			text: "全部状态"
		}, {
			value: 1,
			text: "足球"
		}, {
			value: 2,
			text: "游泳"
		}]),
		outerCollapse = ref(null),
		list = ref([{
			title: '设备总数',
			value: '43',
			unit: '个'
		}, {
			title: '温度传感器',
			value: '14',
			unit: '个'
		}, {
			title: 'CO传感器',
			value: '22',
			unit: '个'
		}, {
			title: '声光传感器',
			value: '14',
			unit: '个'
		}, {
			title: '烟雾传感器',
			value: '22',
			unit: '个'
		}]),
		list1 = ref([{
			title: '今日预警数',
			value: '3',
			unit: '次'
		}, {
			title: '近30天预警数',
			value: '140',
			unit: '次'
		}])
	const handleInnerCollapseChange = (value) => {
		nextTick(() => {
			setTimeout(() => {
				outerCollapse.value.init()
			}, 300)
		})
	};
	let chartData1 = ref({}),
		chartData2 = ref({}),
		chartData3 = ref({}),
		opts1 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: '次',
					titleOffsetX: -10,
					titleOffsetY: -5
				}]
			},
			extra: {
				area: {
					type: "curve",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: true,
					activeType: "hollow",
				}
			}
		},
		opts2 = {
			rotate: false,
			rotateLock: false,
			color: ["#1890FF", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [5, 5, 5, 5],
			dataLabel: false,
			enableScroll: false,
			legend: {
				show: true,
				position: 'bottom'
			},
			title: {
				name: "",
				fontSize: 40,
				color: "#0853FF",
				offsetY: -5
			},
			subtitle: false,
			extra: {
				ring: {
					ringWidth: 30,
					activeOpacity: 0.5,
					activeRadius: 10,
					offsetAngle: 0,
					labelWidth: 20,
					border: true,
					borderWidth: 3,
					borderColor: "#FFFFFF",
				}
			}
		},
		opts3 = {
			color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4", "#ea7ccc"],
			padding: [15, 0, 0, 0],
			dataLabel: false,
			dataPointShape: false,
			legend: {
				show: false
			},
			xAxis: {
				disableGrid: true,
				calibration: true
			},
			yAxis: {
				gridType: "dash",
				showTitle: true,
				data: [{
					min: 0,
					axisLine: false,
					title: 'mg',
					titleOffsetX: -5,
					titleOffsetY: -5,
				}]
			},
			extra: {
				area: {
					type: "straight",
					opacity: 0.2,
					addLine: true,
					width: 2,
					gradient: false,
					activeType: "hollow"
				}
			}
		}
	const getServerData = () => {
		setTimeout(() => {
			let res1 = {
				categories: ["1", "5", "10", "15", "20", "25", "30"],
				series: [{
					name: "",
					data: [20, 40, 36, 22, 30, 28, 10]
				}]
			};
			chartData1.value = JSON.parse(JSON.stringify(res1));
			let res2 = {
				series: [{
					data: [{
						name: "在线",
						value: 85,
						labelText: '在线: 85'
					}, {
						name: "离线",
						value: 20,
						labelText: '离线: 30'
					}, {
						name: "故障",
						value: 15,
						labelText: '故障: 15'
					}, ]
				}]
			};
			chartData2.value = JSON.parse(JSON.stringify(res2));
			let res3 = {
				series: [{
					data: [{
						name: "采场煤层温度",
						value: 85,
					}, {
						name: "筒仓温度",
						value: 20,
					}, {
						name: "煤棚温度",
						value: 15,
					}, ]
				}]
			};
			chartData3.value = JSON.parse(JSON.stringify(res3));
		}, 500);
	}
	onShow(() => {
		getServerData()
	})
	onReachBottom(() => {})
</script>

<style lang="scss" scoped>
</style>